<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body {
            margin: 0;
            height: auto;
            min-height: 100vh
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }
        .clearfix::after {
          content: '';
          display: block;
          height: 0;
          clear: both;
        }
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }

        .aui-tab-item.aui-active {
            color: #f23030;
            border-bottom: 2px solid transparent;
        }
        .aui-tab-item {
          color: #999;
        }
        .near_title {
          position: relative;
          padding: 0.5rem 0.75rem;
          width: 100%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-flex: 1;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          background: #fff;
        }
        .near_title span {
          font-size: 0.7rem;
          color: #666;
        }
        .near_title span.active {
          font-weight: bold;
          font-size: 0.8rem;
          color: #333;
        }
        .near .near_title_r {
          font-size: 0.7rem;
          color: #666;
        }
        .near_title_r img {
          width: 0.7rem;
          display: inline-block;
          margin-right: 0.2rem;
        }
        .pro_list {
          /*background: #f3efee;*/
          padding-bottom: 1rem;
        }
        .pro_list_inner {
          width: 48%;
          margin: 1%;
          background: #fff;
          position: relative;
          /*box-shadow: 1px 2px 3px #ccc;*/
        }
        .pro_list_img {}
        .pro_list_img img {
          width: 100%;
        }
        .pro_list_text {
          text-align: left;
          padding: 0.8rem 0.8rem 1.2rem;
        }
        .pro_list_text h4 {
          color: #333;
          font-size: 0.7rem;
        }
        .pro_list_text h5 {
          color: #f23030;
          font-size: 0.7rem;
        }
        .pro_list_text h6 {
          color: #ff8000;
          font-size: 0.7rem;
          position: absolute;
          bottom: 0.4rem;
          right: 0.8rem
        }
        .pro_list_text p {
          color: #fff;
          padding: 0 0.2rem;
          font-size: 0.7rem;
          position: absolute;
          top: 0;
          left: 0;
          background: #f23030;
        }
        .shop_info_list {
          padding: 0 0.75rem;
          background: #fff
        }
        .shop_info_list li > div {
          padding: 0.8rem 0;
          border-bottom: 1px solid #e6e6e6;
          color: #333;
          font-size: 0.7rem;
        }
        .shop_info_list li > div img {
          width: 0.6rem;
          margin-right: 0.2rem;
          display: inline-block;
        }
        .shop_info_list li > div span {
          color: #999;
          margin-right: 0.4rem;
        }
        .shop_info_list li > div i {
          color: #2982d6;
          float: right;
        }
        .shop_tit {
          background: #fff;
          padding: 0.8rem 0;
        }
        .shop_tit img {
          width: 36%;
          display: block;
          margin: auto;
        }
        .shop_info .aui-col-xs-4 {
          padding: 0.2rem;
        }
        #tab {
          z-index: 1
        }
        .aui-refresh-content {
          min-height: calc(100vh - 2.4rem)
        }
        .pro_list_text h4 {
          display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 20px;
        }
        .pro_list_text h5 {
          display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 40px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
      <div class="aui-tab" id="tab">
        <!-- <div class="aui-tab-item aui-active">全部产品（{{goodsList.length}}）<i class="aui-iconfont aui-icon-down"></i></div> -->
          <div class="aui-tab-item aui-active">全部产品（{{goodsList.length}}）</div>
          <div class="aui-tab-item"><div></div>商家信息</div>
      </div>
      <div class="aui-refresh-content">
        <div class="h10"></div>
        <div class="all_pro">
          <!-- <div class="near_title">
            <div class="near_title_l">
              <span class="active">买赠商品</span>
              <span>分销商品</span>
            </div>
            <div class="near_title_r"><img src="../../image/two/sort.png" alt="">默认排序</div>
          </div> -->
          <div class="pro_list clearfix">
            <div class="pro_list_inner fl" v-for="item in goodsList" @click="openProDetail(item.goods_name, item.goods_id)">
              <div class="pro_list_img">
                <div :style="'background: url('+item.logo_pic+') no-repeat center/cover;width: 100%;height: 8rem'"></div>
              </div>
              <div class="pro_list_text">
                <h4>{{item.goods_name}}</h4>
                <h5>{{item.goods_title}}</h5>
                <h6 v-if="item.type == 3">含赠品</h6>
                <h6 v-else-if="item.type == 1">预计收益{{item.income}}</h6>
                <!-- <p>限时特惠</p> -->
              </div>
            </div>
          </div>
        </div>
        <div class="shop_info" style="display:none">
          <div class="shop_info_list">
            <ul>
              <li>
                <div>
                  <span>店铺评价</span>
                  <div style="display: inline-block" v-if="(info.fraction - 0)">
                    <img src="../../image/two/star-on.png" alt="" v-for="n in (info.fraction - 0)">
                    <img src="../../image/two/star-off.png" alt="" v-for="n in (5 - (info.fraction - 0))">{{info.fraction}}
                  </div>
                </div>
              </li>
              <li>
                <div>
                  <span>营业时间</span>
                  {{info.business_time}}
                </div>
              </li>
              <li>
                <div>
                  <span>联系方式</span>
                  {{info.kefu_tel}}
                </div>
              </li>
              <li>
                <div>
                  <span>商家地址</span>
                  {{info.province}} {{info.city}} {{info.district}} {{info.address}}
                  <i class="aui-iconfont aui-icon-paper" @click="openMap(info.province + info.city + info.district + info.address)"></i>
                </div>
              </li>
            </ul>
          </div>
          <div class="h10"></div>
          <div class="shop_tit">
            <img :src="info.logo" alt="">
          </div>
          <section class="aui-grid" v-if="info.outdoor_scene && info.outdoor_scene.length > 0">
              <div class="aui-row">
                  <div class="aui-col-xs-4" v-for="item in info.outdoor_scene">
                    <div :style="'background: url('+item+') no-repeat center/cover;width: 100%;height: 5rem;'"></div>
                  </div>
              </div>
          </section>

        </div>
</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript">
    function openDetail(type, name) {
      api.openWin({
        name: type,
        url: './two_frame_header.html',
        pageParam: {
            type: type,
            name: name
        }
      })
    }
    apiready = function () {
        $('body').on('click', '.near_title_l span', function () {
          $(this).addClass('active').siblings().removeClass('active')
        })
      var app = new Vue({
        el: '#app',
        data: {
          banner: [],
          goodsList: [],
          page: 1,
          totalpage: 1,
          sort: 1,
          info: {},
          defaultType: 3
        },
        created: function () {
            var $_this = this;
            api.showProgress({
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: false
            });
            api.ajax({
              url: window.Url.Freestore_goodsList,
              method: 'post',
              data: {
                values: {
                  token: $api.getStorage('token'),
                  page: $_this.page,
                  store_id: api.pageParam.id
                }
              }
            }, function(ret, err) {
                if (ret) {
                  console.log(JSON.stringify(ret))
                  if (ret.re == 1) {
                    $_this.goodsList = ret.data.list
                    $_this.totalpage = ret.data.sum_page
                  }

                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
            api.ajax({
              url: window.Url.Freestore_index,
              method: 'post',
              data: {
                values: {
                  token: $api.getStorage('token'),
                  store_id: api.pageParam.id
                }
              }
            }, function(ret, err) {
                if (ret) {
                  console.log(JSON.stringify(ret))
                  $_this.info = ret.data
                } else {
                    api.alert({ msg: JSON.stringify(err) });
                }
            })
        },
        methods: {
          openMap: function (address) {
            api.openWin({
              name: 'map',
              url: './map.html',
              pageParam: {
                name: api.pageParam.name,
                address: address
              }
            })
          },
          openProDetail: function (name, id) {
            api.openWin({
                name: 'commodity',
                url: '../one_frame/commodity.html',
                pageParam: {
                  name: name,
                  id: id
                }
            });
          }
        },
        mounted: function () {
          var $_this = this
        api.hideProgress()
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        },function(ret){
            if(ret.status=="success"){

              api.ajax({
                url: window.Url.Freestore_goodsList,
                method: 'post',
                data: {
                  values: {
                    token: $api.getStorage('token'),
                    page: $_this.page,
                    store_id: api.pageParam.id
                  }
                }
              }, function(ret, err) {
                  if (ret) {
                    console.log(JSON.stringify(ret))
                    if (ret.re == 1) {
                      $_this.goodsList = ret.data.list
                      $_this.totalpage = ret.data.sum_page
                    }

                  } else {
                      api.alert({ msg: JSON.stringify(err) });
                  }
              })
              api.ajax({
                url: window.Url.Freestore_index,
                method: 'post',
                data: {
                  values: {
                    token: $api.getStorage('token'),
                    store_id: api.pageParam.id
                  }
                }
              }, function(ret, err) {
                  if (ret) {
                    console.log(JSON.stringify(ret))
                    $_this.info = ret.data
                    setTimeout(function(){
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                    },500)
                  } else {
                      api.alert({ msg: JSON.stringify(err) });
                  }
              })
            }
        })
          var tab = new auiTab({
            element:document.getElementById("tab"),
            index:1,
            repeatClick:false
          },function(ret){
              if (ret.index == 1) {
                $('.all_pro').show().siblings('.shop_info').hide()
              } else if (ret.index == 2) {
                $('.shop_info').show().siblings('.all_pro').hide()
              }
          });
          var bannerSwiper = new Swiper('#pro1-swiper', {
              autoplay: 3000,
              loop: true
          })
        }
      })
    }
</script>

</html>
